<template>
  <div>
    <Header />
    <van-row type="flex"
             justify="center">
      <van-image round
                 width="10rem"
                 height="10rem"
                 :src="errorImg" />
    </van-row>
    <div class="layer-time">
      {{time}}
    </div>
    <div class="layer-time">
      <van-button plain
                  hairline
                  type="primary"
                  to="/home">返回首页</van-button>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import Header from '@/components/header/Header'
import errorImg from '@/assets/error/error.jpg'
export default {
  name: 'ErrorPage',
  components: {
    Header
  },
  data() {
    return {
      timeInterval: null,
      time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      errorImg: errorImg
    }
  },
  mounted() {
    this.timeInterval = setInterval(() => {
      this.refreshTime()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
  },
  methods: {
    refreshTime() {
      this.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        };
      };
      return fmt
    }
  }
}
</script>

<style scoped lang="stylus">
.layer-time
  font-size 2em
  font-weight bold
  color rgba(0, 0, 0, 0.2)
  overflow hidden
  text-align center
  margin-top 1em
.van-row
  margin-top 5em
</style>
